<template>
  <head>
     <!--<< Required meta tags >>-->
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="author" content="NextGenerationDev">
     <!--<< Title >>-->
     <title>NextAI - NextGeneration AI HTML Template</title>
     <!--<< Favcion >>-->
     
     <!--<< Bootstrap min.css >>-->
     <link rel="stylesheet" href="static/css/bootstrap.min1.css">
      <!--<< All min.css >>-->
      <link rel="stylesheet" href="static/css/all.min.css">
     <!--<< Main.css >>-->
     <link rel="stylesheet" href="static/css/main.css">
  </head>
  
  <!--<< Body Area >>-->
  <body>
  
     <!-- Preloader Start Here -->

     <!-- Preloader End Here -->
  
  <!--<< Header Menu >>-->
  <header class="header-section header__one" style = "border: 0cm;">
     <div class="container">
        <div class="header-wrapper">
           <div class="main__logo" style="font-size: 20px">
              <img src="./static/image/logo1.png" alt="logo" style="width: 40px; ;">
              Medical Image Segmentation
           </div>
           <div class="logo__menuadjust">
              <ul class="main-menu" >
                 <li class = "bar" >
                    <router-link to="/" >
                       首页
                    </router-link>
                 </li>
				 <li class = "bar">
				    <router-link to="/visi">
				       医情可视化
				    </router-link>
				 </li>
				 <li class="bar">
				    <router-link to="/imgSeparate">
				       辅助阅片
				    </router-link>
				 </li>

                 <li class="bar" >
                    <router-link to="/advance_ph" :class="{ active: isCurrentRoute2 }">
                       图像处理
                       <i class="fas fa-chevron-down" style = "width = 500px"></i>
                    </router-link>
                    <ul class="sub-menu" >
                       <li>
                          <router-link to="/advance_ph">
							  平滑（去除噪点）
						  </router-link>
                       </li>
                       <li>
							<router-link to="/advance_rh">
        					  锐化（增强边缘）
							</router-link>
                       </li>
                       <li >
                       		<router-link to="/advance_xtx">
           					  形态学变换（形状分析）
							</router-link>
                       </li>
                    </ul>
                 </li>

                 <li >
                    <a href="#" :class="{ active: isCurrentRoute1 }">
                       图像分割
                       <i class="fas fa-chevron-down"></i>
                    </a>
                    <ul class="sub-menu">
                       <li>
                          <router-link to="/advance_zl">
                    		  肺部分割（CT图像）
                    	  </router-link>
                       </li>
                       <li>
                    		<router-link to="/advance_xb">
                    		  细胞分割（显微图像）
                    		</router-link>
                       </li>
                       <li>
                       		<router-link to="/advance_pf">
                    		  皮肤分割（自然图像）
                    		</router-link>
                       </li>
                    </ul>
                 </li>
                 
              </ul>
           </div>
           <div class="menu__components d-flex align-items-center">
              

              <div class="header-bar d-lg-none">
                 <span></span>
                 <span></span>
                 <span></span>
              </div>
           </div>
        </div>
     </div>
  </header>
  <router-view></router-view>
  </body>
  <!--<< Header Menu >>-->   

</template>
<script>
	export default{
		computed: {
		  isCurrentRoute1() {
		    return this.$route.path === '/advance_zl' || 
		           this.$route.path === '/advance_xb' || 
		           this.$route.path === '/advance_pf';
		  },
		  isCurrentRoute2() {
		    return this.$route.path === '/advance_ph' || 
		           this.$route.path === '/advance_rh' || 
		           this.$route.path === '/advance_xtx';
		  }
		}
	}
</script>
<style>
		
	li{
		color: #000d65;
	}
.router-link-active {
 	font-weight: bold !important;

	border-bottom: #41f681 solid 2px;
	/* background-color: transparent !important; */
   /* padding: 10px 0px !important; */
}
 .active{
	font-weight: bold !important;
	border-bottom: #41f681 solid 2px;
	/* background-color: transparent !important; */
   /* padding: 10px 0px !important; */
 }
/* li{
	font-size: 32px !important;
}
*{
	font-size: 22px !important;
} */

</style>
